<template>
  <div class="app-main-container">
    <div class="app-main-title">
      {{ $t('message.djlb') }}
      <div class="goback" @click="$router.go(-1)">
        <i class="el-icon-refresh-left" /> {{ $t('message.fhsyy') }}
      </div>
    </div>
    <el-tabs v-model="activeProject" @tab-click="tabChange">
      <el-tab-pane
        v-for="item in projectList"
        :key="item.id"
        :label="item.projectName"
        :name="item.id"
      >
        <!-- 日期和场区选择、颜色标识 -->
        <div class="date-legend">
          <div class="input">
            <el-date-picker
              v-model="activeDate"
              type="date"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              :placeholder="$t('message.xzrq')"
              :clearable="false"
              @change="getSiteList"
            />
          </div>
          <div class="input">
            <el-select
              v-model="activeArea"
              :placeholder="$t('message.xzcq')"
              clearable
              @change="getSiteList"
            >
              <el-option
                v-for="area in areaList"
                :key="area.id"
                :label="area.areaName"
                :value="area.id"
              />
            </el-select>
          </div>
          <div class="color-list">
            <div v-for="color in colorList.slice(0, 5)" :key="color.id" class="color-item">
              <div
                class="number"
                :style="'background-color: ' + color.number"
              />
              <div class="name">{{ color.name }}</div>
            </div>
          </div>
        </div>
        <div class="week">
          <span :class="new Date(weekList[0].old.toLocaleDateString()).getTime() <= presentTime ? 'no': ''" @click="weekChange(1, new Date(weekList[0].old.toLocaleDateString()).getTime() <= presentTime)"><i class="el-icon-arrow-left" /></span>
          <span
            v-for="(weeks, dex) in weekList"
            :key="dex"
            :class="weeks.old.getTime()< presentTime ? 'none' :activeDate == weeks.value ? 'show on' : 'show'"
            @click="weekClick(weeks, weeks.old.getTime()>= presentTime)"
          >
            {{ weeks.label }}
          </span>
          <span @click="weekChange(2)"><i class="el-icon-arrow-right" /></span>
        </div>
        <div class="ydCnt">
          <div v-if="siteListData && siteListData.length > 0" class="site-list-box">
            <div class="time-list">
              <div class="list-item close-all">
                {{ $t('message.cq') }}
              </div>
              <div v-for="time in siteListData[0].sites" :key="time.id" class="list-item time">
                {{ time.beginTime + " - " + time.endTime }}
              </div>
            </div>
            <div
              v-if="siteListData &&
                siteListData.length > 0 &&
                siteListData[0].sites &&
                siteListData[0].sites.length > 0
              "
              class="site-list"
            >
              <div v-for="site in siteListData" :key="site.id" class="site-item">
                <div class="list-item site-name">
                  <el-popover
                    placement="top-start"
                    transition="none"
                    popper-class="popClass"
                    :content="site.siteModelName"
                    trigger="hover"
                  >
                    <span slot="reference">{{ site.siteModelName }}
                      <!-- {{ site.statusList ? '(' + site.statusList.indexOf('0') +
                  site.statusList.indexOf('3') + ')' : '(999)' }} -->
                    </span>
                  </el-popover>
                </div>
                <el-popover
                  v-for="price in site.sites"
                  :key="price.id"
                  transition="none"
                  placement="top"
                  popper-class="popClass"
                  :close-delay="closeDelay"
                  trigger="hover"
                  :content="site.siteModelName +
                    ':' +
                    price.beginTime +
                    ' - ' +
                    price.endTime
                  "
                >
                  <div
                    slot="reference"
                    class="list-item site-price"
                    :class="price.status === '6'
                      ? 'mian' : price.overdue == true
                        ? price.status === '1'
                          ? 'red'
                          : price.status === '2'
                            ? 'green'
                            : 'hui'
                        : price.status === '1' || price.status === '4'
                          ? 'red'
                          : price.status === '2' || price.status === '5'
                            ? 'green'
                            : price.status === '3'
                              ? 'yellow'
                              : price.status === '7' ||
                                price.status === '8' ||
                                price.status === '9' ||
                                price.status === '10'
                                ? 'hui'
                                : ''
                    "
                  >
                    <div slot="reference">
                      <div>{{ price.status === '6'?$t('message.mianfei'):price.price }}</div>
                    </div>
                  </div>
                </el-popover>
              </div>
            </div>
            <div v-else style="display: flex;justify-content: center;align-items: center;height: 100%;">
              <img src="@/icons/png/default_nodata.png" style="width: 240px;display: block">
            </div>
          </div>
          <div v-else style="display: flex;justify-content: center;align-items: center;height: 100%;">
            <img src="@/icons/png/default_nodata.png" style="width: 240px;display: block">
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import { getProjectList, getAreaListByProjectId, siteList } from '@/api'
export default {
  name: 'VenuePriceList',
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
        }
      },
      presentTime: new Date(new Date().toLocaleDateString()).getTime(),
      colorList: [
        { id: 1, name: this.$t('message.kycd'), number: 'rgba(244, 247, 252, 1)' },
        { id: 2, name: this.$t('message.cdsc'), number: 'rgba(251, 188, 38, 1)' },
        { id: 3, name: this.$t('message.ydwf'), number: 'rgba(237, 77, 0, 1)' },
        { id: 4, name: this.$t('message.ydyf'), number: 'rgba(34, 179, 107, 1)' },
        { id: 5, name: this.$t('message.gqcd'), number: 'rgba(204, 204, 204, 1)' },
        { id: 6, name: this.$t('message.mfcd'), number: 'rgb(61,206,209)' }
      ],
      projectList: [],
      activeProject: '',
      activeDate: '',
      closeDelay: 0,
      areaList: [],
      activeArea: '',
      siteListData: [],
      weekList: [],
      currentDate: ''
    }
  },
  created() {
    this.activeDate = this.formatDate(new Date()).value
    this.toGetProjectList()
    this.setDate(new Date())
  },
  methods: {
    toGetProjectList() {
      const venueId = sessionStorage.getItem('venueId')
      getProjectList({ param: { venueId, status: '1', type: '0' }}).then(res => {
        this.projectList = res.recordList
        this.activeProject = res.recordList[0].id
        this.toGetAreaListByProjectId(res.recordList[0].id)
      })
    },
    // 获取星期
    calculation(s) {
      return s < 10 ? '0' + s : s
    },
    formatDate(date) {
      const year = date.getFullYear() + '-'
      const month = this.calculation(date.getMonth() + 1) + '-'
      const day = this.calculation(date.getDate())
      const week = [this.$t('message.z7', this.$t('message.z1'), this.$t('message.z2'), this.$t('message.z3'), this.$t('message.z4'), this.$t('message.z5'), this.$t('message.z6'))][date.getDay()]
      return {
        label: month + day + ' ' + week,
        value: year + month + day,
        old: new Date(date)
      }
    },
    weekClick(e, pd) {
      if (pd) {
        this.activeDate = e.value
        this.currentDate = e.old
        this.getSiteList()
      }
    },
    addDate(date, n) {
      date.setDate(date.getDate() + n)
      return date
    },
    setDate(date) {
      var week = date.getDay() - 1
      if (week === -1) {
        week = 6
      }
      // date = this.addDate(date, week * -1)
      this.currentDate = new Date(date)
      const arr = []
      for (var i = 0; i < 7; i++) {
        arr[i] = this.formatDate(i === 0 ? date : this.addDate(date, 1))
      }
      this.weekList = arr
    },
    weekChange(e, b) {
      if (e === 1) {
        if (!b) {
          this.setDate(this.addDate(this.currentDate, -7))
        }
      } else {
        this.setDate(this.addDate(this.currentDate, 7))
      }
    },
    // 项目切换
    tabChange(tab) {
      this.activeProject = tab.name
      this.activeArea = ''
      this.areaList = []
      // this.activeDate = parseTime(new Date())
      this.toGetAreaListByProjectId(tab.name)
    },
    // 获取场区列表
    toGetAreaListByProjectId(id) {
      getAreaListByProjectId({ param: { id }}).then(res => {
        this.areaList = res.recordList
        this.getSiteList()
      })
    },
    // 获取场次列表
    getSiteList() {
      const { activeArea: areaId, activeProject: projectId, activeDate } = this
      this.currentDate = new Date(activeDate)
      this.setDate(new Date(activeDate))
      const day = parseTime(activeDate).slice(0, 10)
      siteList({ param: { areaId, projectId, day, flag: '1' }}).then(res => {
        this.siteListData = res.recordList
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.date-legend {
  display: flex;
  margin-bottom: 30px;
  > * {
    margin-right: 20px;
  }
  .color-list {
    margin-right: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin: -10px 0;
    .color-item {
      margin-left: 20px;
      display: flex;
      align-items: center;
      padding: 10px 0;
      .number {
        width:  20px;
        height:  20px;
        border-radius: 4px;
        margin-right: 10px;
      }
      .name {
        height: 20px;
        font-size: 13px;
        line-height: 20px;
      }
    }
  }
}
.week {
    display: flex;
    margin-bottom: 20px;
    span {
      flex: 1;
      text-align: center;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      background: #F4F7FC;
      border-radius: 2px;
      margin-right: 12px;
      &:first-of-type {
        width: 28px;
        flex: none;
        &.no {
          color: rgb(170, 170, 170);
          cursor: not-allowed;
        }
      }
      &:last-of-type {
        width: 28px;
        flex: none;
        margin-right: 0;
      }
      &.show {
        &.on,
        &:hover {
          color: #fff;
          background-color: #435ebe;
        }
      }
      &.none {
        background-color: rgb(170, 170, 170);
        color: #fff;
        cursor: not-allowed;
      }
    }
  }
  .ydCnt {
    overflow-x: auto;
    width: 100%;
  }

  .site-list-box {
    display: flex;
    position: relative;
    padding-left: 120px;

    .time-list {
      width: 120px;
      position: absolute;
      left: 0;
      top: 0;
    }

    .list-item {
      border: 1px solid transparent;
      width: 120px;
      height: 40px;
      background-position: right bottom;
      background-size: 20px 20px;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 5px;
      cursor: pointer;
      background-color: rgba(244, 247, 252, 1);
      font-size: 14px;

      &.close-all,
      &.time {
        background-color: #f5f5f5;
        white-space: nowrap;
        text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
        overflow: hidden;
        display: block;
        line-height: 40px;
        text-align: center;
      }

      &.time {
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }
      &.site-name{
        background-color: #f5f5f5;
        display: block;
        line-height: 40px;
        padding: 0 5px;
        text-align: center;
        display: flex;
        justify-content: center;
        span {
          white-space: nowrap;
         text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
         overflow: hidden;
        }
        img {
          width: 20px;vertical-align: middle;margin-left: 5px;margin-top: -2px;flex: none;
        }
      }
    }

    .wzred {
      color: rgba(237, 77, 0, 1);
    }

    .site-price {
      color: #333333;
      position: relative;
    }

    .yellow {
      color: #fff;
      background-color: rgba(251, 188, 38, 1);
    }

    .blue {
      color: #fff;
      background-color: rgb(61, 206, 209);
    }

    .red {
      color: #fff !important;
      background-color: rgba(237, 77, 0, 1);
    }

    .green {
      color: #fff;
      background-color: rgba(34, 179, 107, 1);
    }

    .hui {
      color: #fff;
      background-color: rgba(204, 204, 204, 1);
    }
    .mian {
      color: $primaryColor;
    }

    .site-list {
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      display: flex;

      .site-item {
        width: 120px;
        margin-left: 5px;
      }
    }
  }
</style>
